<template>
  <div class="doc_12">
    <h2 id="doc_12_1">1. 动画类型</h2>
    <p>为了使H5页面展示效果更加舒适，我们引入了丰富的动画效果，以 animate.css 为基础，并可不断添加新的动画效果，目前已有动画效果如下；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559037722890-a1754a98-7171-452f-b809-f093c7a17f0f.png" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559037735977-8317fa99-d3e8-4753-a32e-135002ae63b2.png?x-oss-process=image/resize,w_280" alt="">
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559037746584-e0a912c9-e070-4c35-9303-6be2a26e1d97.png" alt="">
      </span>
    </p>
    <p></p>
    <h2 id="doc_12_2">2. 操作</h2>
    <p>第一步：在编辑页面中，选中想要添加动画的元素，点击右侧编辑面板的 动画 按钮；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559038078201-5762cfd6-0b6a-4308-87e9-3549cc88e359.png?x-oss-process=image/resize,w_952" alt="">
      </span>
    </p>
    <p></p>
    <p>第二步：点击 添加动画 按钮，弹出 选择动画 界面，鼠标移过动画类型图标时，可预览动画；然后可点击添加预期的动画效果；可添加多个动画效果；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559038154342-a4909bd6-f81f-4b9d-bd78-abd7c1247fa2.png" alt="">
      </span>
    </p>
    <p></p>
    <p>第三步：选择动画结束后，返回 动画 编辑界面，可编辑每个动画的参数，来实现动画多次重复播放/延时播放/控制动画时长等；</p>
    <p>
      <ol>
        <li>时长：控制动画播放时间</li>
        <li>延时：控制动画延时播放，即在页面加载完成后，延时n秒播放动画；</li>
        <li>重复次数：动画重复播放的次数；</li>
      </ol>
    </p>
    <p>添加多个动画效果时，可通过调整每个动画的延时和时长，来实现动画串行播放；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559039253135-e2d60aef-aad8-4e1b-877f-106d0b869abb.png" alt="">
      </span>
    </p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
